<template>
  <view class="pack-container">

    <!-- 隐藏的 Canvas 组件 -->
<!--    <canvas class="mycanvassss" id="mycanvas" canvas-id="mycanvas"-->
<!--            :style="'width:' + share_width + 'px;height:' + share_height + 'px;position:fixed;top:-9999px;z-index: -1;'"></canvas>-->

    <!--<u-navbar :immersive="true" :is-back="false" :background="background" :border-bottom="false">
      <view v-if="scHeight<10" class="nav_bar u-flex" style="flex: 1">
        <image @click="Fanhui()" :src="BestImgUrl+'/PackageDetails/Group 34757.png'"></image>
        &lt;!&ndash;<view v-show="scHeight>10" class="nva_bar_content" >
          <view class="nav_bar_content_left" >{{toFixedTwo(packageDetails.discount_rate * 10)}}折</view>
          <view class="nav_bar_title" >{{NavTitle}}</view>
          <view class="nav_bar_content_right" >￥{{toFixedZ(packageDetails.price)}}</view>
        </view>&ndash;&gt;
      </view>

    </u-navbar>-->
    <view class="top_box_head" >
      <!-- 状态栏高度 -->
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
      <image @click="Fanhui()" :src="BestImgUrl+'/PackageDetails/Group 34757.png'"></image>
    </view>
    <!-- 重新定义顶部状态栏和导航栏 -->
    <view v-if="showTabs" class="top_box" >
      <!-- 状态栏高度 -->
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
      <view class="nav_bar u-flex" style="flex: 1">
        <u-icon name="arrow-left" color="#333333" size="40" @click="Fanhui()" style="padding: 20rpx"></u-icon>
        <view class="nva_bar_content" >
          <view class="nav_bar_content_left" >{{toFixedTwo(packageDetails.discount_rate * 10)}}折</view>
          <view class="nav_bar_title" >{{NavTitle}}</view>
          <view class="nav_bar_content_right" >￥{{toFixedZ(packageDetails.price)}}</view>
        </view>
      </view>
      <u-line color="#F6F6F6" hair-line></u-line>
      <!--  导航tabs  -->
      <u-tabs
          @change="uTabsChange"
          :list="packTabList"
          :is-scroll="true"
          :current="currentTab"
          :show-bar="true"

          active-color="#FFA844" inactive-color="#999999"
          :active-item-style="{ color: '#FFA844','fontWeight':'normal',}"
          item-width="20%"
          font-size="24rpx"
          bar-height="10"></u-tabs>

    </view>



<!--    商品详情swpier-banner-->
    <view id="tabsInfo1" class="swpier_wrap" >
      <view class="swpier_box">
        <u-swiper :list="swiperlist" height="800" @change="changeS"></u-swiper>
        <view class="indicator">{{ swpierIdx + 1 }}/{{ swiperlist.length }}</view>
      </view>
      <!--			<view class="price_box u-flex">-->
      <!--				<text>探店价</text>-->
      <!--				<text>¥{{toFixedTwo(packageDetails.price - packageDetails.rebate_amount)}}</text>-->
      <!--				<text>= 先付¥{{toFixedTwo(packageDetails.price)}}元 - 探店后返¥{{toFixedTwo(packageDetails.rebate_amount)}}</text>-->
      <!--			</view>-->
      <view style="background-color: #fd6500;border-radius: 33rpx 33rpx 0 0;position: absolute; left: 0;bottom: 0;width: 100%;display: flex">
        <view style="padding: 16rpx 0 0 30rpx">
          <view style="color: white;font-size: 28rpx">
            <text>探店价 ¥<text style="font-size: 38rpx;font-weight: bold">{{ toFixedTwo(packageDetails.price - packageDetails.rebate_amount) }}</text></text>
            <text style="text-decoration: line-through;font-size: 26rpx;margin-left: 20rpx">
              原价¥{{ toFixedTwo(packageDetails.price) }}
            </text>
          </view>
          <view style="background-color: #FFE8D6;border-radius: 6rpx;text-align: center;color: #FF7B05;
          padding: 5rpx 6rpx;font-size: 24rpx;margin-top: 8rpx;display: inline-block">
            <image src="/static/shop-item/detail4.png" style="height: 28rpx;width: 28rpx;margin-right: 10rpx"></image>
            活动返¥{{ toFixedTwo(packageDetails.rebate_amount) }}
          </view>
        </view>
        <view style="flex: 1"></view>
        <view style="position: relative">
          <image src="/static/shop-item/detail3.png" style="height: 38rpx;width: 160rpx;position: absolute;z-index: 2;
            top: 43rpx;right: 38rpx"></image>
          <image src="/static/shop-item/detail1.png" style="height: 120rpx;width: 336rpx"></image>
        </view>
      </view>
    </view>
<!--    抢单奖励步骤-->
    <view class="buzhou_box u-flex">
      <view class="buzhou_item u-flex">
        <text style="color: #FFFFFF;background-color: #fb6400;padding: 5rpx 11rpx;border-radius: 8rpx">1</text>
        <text style="margin-left: 6rpx">抢购名额</text>
      </view>
      <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame1.png'"></image>
      <view class="buzhou_item u-flex">
        <text style="color: #FFFFFF;background-color: #fb6400;padding: 5rpx 11rpx;border-radius: 8rpx">2</text>
        <text style="margin-left: 6rpx">到店核销</text>
      </view>
      <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame1.png'"></image>
      <view class="buzhou_item u-flex">
        <text style="color: #FFFFFF;background-color: #fb6400;padding: 5rpx 11rpx;border-radius: 8rpx">3</text>
        <text style="margin-left: 6rpx">发布笔记</text>
      </view>
      <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame1.png'"></image>
      <view class="buzhou_item u-flex">
        <text style="color: #FFFFFF;background-color: #fb6400;padding: 5rpx 11rpx;border-radius: 8rpx">4</text>
        <text style="margin-left: 6rpx">奖励到账</text>
      </view>
    </view>


    <view class="details_info1">
      <view class="info_title">{{ packageDetails.name || '' }}</view>
      <view class="info_tags" style="display: flex">
        <u-tag :text="packageDetails.notes" type="success" size="mini"/>
        <view @click="isShowTD = true" style="margin-left: 20rpx;display: flex;align-items: center;">
          <u-tag text="探店无忧险" type="success" size="mini"/>
          <view style="width: 10rpx;"></view>
          <u-icon name="question-circle" size="28" color="#19be6b"  />
        </view>
      </view>
            <!--<view class="info_list">
              <view class="info_list_item u-flex">
                <text>探店等级</text>
                <view class="hongse" @click="Torenzheng()">V{{ packageDetails.vip_level }}
                  <u-icon name="arrow-right"
                          color="#FF4E0D" size="24"></u-icon>
                </view>
              </view>
              <view class="info_list_item u-flex">
                <text>探店须知</text>
                <view>{{ packageDetails.usage_time }}</view>
              </view>
              <view class="info_list_item u-flex">
                <text>笔记平台</text>
                <view>
                  <span v-if="packageDetails.platform_type==1">小红书</span>
                  <span v-if="packageDetails.platform_type==2">抖音</span>
                  <span v-if="packageDetails.platform_type==3">大众点评</span>
                  <span v-if="packageDetails.platform_type==4">美团</span>
                </view>
              </view>
            </view>-->
      <view class="info_address">
        <view class="left_1 text-Omit u-flex" style="align-items: center;display: flex;margin-top: 10rpx" @click="ToShopsDetails()">
          <view style="font-size: 28rpx;flex: 1;font-weight: bold">{{ packageDetails.shop_name }}</view>
          <image :src="BestImgUrlBwc + '/user/right@3x.png'"
                 style="width: 12rpx;height: 19rpx;;margin-left: 10rpx"></image>
        </view>
        <view class="u-flex" style="margin-top: 10rpx">
          <view class="info_address_left">
            <view class="left_2 u-flex">
              <u-icon name="clock" color="#666666"
                      size="28"></u-icon>
              {{ packageDetails.open_time }}-{{ packageDetails.close_time }}
            </view>
            <view class="left_2 u-flex">
              <u-icon name="map" color="#666666" size="30"></u-icon>
              <span
                  class="text-Omit">
                <text style="margin-right: 10rpx">距离<text style="color: black">{{ packageDetails.distance }}km</text></text>&nbsp;&nbsp;
                {{ packageDetails.address }}
              </span>
            </view>
          </view>
          <view class="info_address_right u-flex">
            <view class="right_1" @click="Daohang()">
              <image src="/static/tandian/address.png"></image>
              <view>导航</view>
            </view>
            <view style="width: 20rpx"></view>
            <view class="right_1" @click="Tel()">
              <image src="/static/tandian/phone.png"></image>
              <view>电话</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="details_info2">
      <!--      <image class="title" :src="BestImgUrl+'/PackageDetails/Group 34804.png'"></image>-->
      <!--      <view style="font-size: 32rpx;color: black"></view>-->
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">探店说明</view>
      </view>
      <view class="info_list u-flex" style="align-items: center" @click="showUse = true">
        <view style="font-size: 24rpx;color: #666666">使用须知</view>
        <view style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;flex: 1">
          <text v-if="packageDetails.is_reservation == 2" style="color: #fd6a00;">免预约 | 无需预约</text>
          <text v-if="packageDetails.is_reservation == 1" style="color: #fd6a00;">需要预约</text>
          <text>{{weekList.otherNum}}</text>
          均可使用
        </view>
        <image :src="BestImgUrlBwc + '/user/right@3x.png'" style="width: 12rpx;height: 19rpx;"></image>
      </view>
      <view class="info_list u-flex">
        <view style="font-size: 24rpx;color: #666666">购买平台</view>
        <view style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx">在领食惠探店平台购买套餐</view>
      </view>
      <view class="info_list u-flex" @click="showAsk = true">
        <view style="font-size: 24rpx;color: #666666">笔记要求</view>
        <!--{{packageDetails.platform_type === 3 ? "大众点评" : "小红书" }}-->
        <view v-if="packageDetails.is_multi_platform == 1" style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;flex: 1">
          发布真实体验
          <view v-for="(item,index) in packageDetails.note_platforms" :key="index" style="display: inline-block;font-size: 24rpx;">
            {{ item.title }}
            <text v-if="index != packageDetails.note_platforms.length - 1" style="padding: 0">+</text>
          </view>
          笔记
        </view>
        <view v-else style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx;flex: 1">
          发布真实体验{{ packageDetails.platform_type.title }}笔记
        </view>
        <view class="u-flex">
          <view style="color: #999999;font-size: 24rpx">详情</view>
          <image :src="BestImgUrlBwc + '/user/right@3x.png'"
                 style="width: 12rpx;height: 19rpx;;margin-left: 10rpx"></image>
          <view class="mustSee" style="color: white;font-size: 22rpx">必看</view>
        </view>
      </view>
      <view class="info_list u-flex">
        <view style="font-size: 24rpx;color: #666666">账号要求</view>
        <view style="font-size: 24rpx;color: #3D3D3D;margin-left: 16rpx">
          {{ packageDetails.platform_type.platformType === 3 ? "大众点评等级≥" + packageDetails.level : "小红书粉丝数≥" + packageDetails.fans_num }}
        </view>
      </view>
      <!--      <view class="info_list u-flex">-->
      <!--        <view>笔记平台</view>-->
      <!--        <span v-if="packageDetails.platform_type==1">小红书</span>-->
      <!--        <span v-if="packageDetails.platform_type==2">抖音</span>-->
      <!--        <span v-if="packageDetails.platform_type==3">大众点评</span>-->
      <!--        <span v-if="packageDetails.platform_type==4">美团</span>-->
      <!--      </view>-->
      <!--      <view class="info_list u-flex">-->
      <!--        <view>账号要求</view>-->
      <!--        <span> {{ packageDetails.platform_type === 3 ? "大众点评等级≥" + packageDetails.level: "小红书粉丝数≥" + packageDetails.fans_num}}</span>-->
      <!--      </view>-->
      <!--      <view class="info_list u-flex">-->
      <!--        <view>笔记内容</view>-->
      <!--        <text>{{ packageDetails.activity_ask }}</text>-->
      <!--      </view>-->
      <!--      <view class="info_list u-flex">-->
      <!--        <view>携带话题</view>-->
      <!--        <span v-for="(itemx,indexx) in subject" :key="indexx">#{{ itemx.name }} </span>-->
      <!--      </view>-->
      <!--      <view class="info_list u-flex">-->
      <!--        <view>门店定位</view>-->
      <!--        <span>{{ packageDetails.address }}</span>-->
      <!--      </view>-->
    </view>
    <view class="details_group_chat" @click="goToGroup">
      <view class="details_group_chat_title" ><image :src="`https://td.lszbg.com/public/uploads/h5/shop/shop_details_group_img01.png`"></image></view>
      <view class="details_group_chat_text" ><image :src="`https://td.lszbg.com/public/uploads/h5/shop/shop_details_group_img02.png`"></image></view>
      <view class="details_group_chat_btn" >
        <text>立即进群</text>
      </view>
    </view>
    <view id="tabsInfo2" class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">套餐详情</view>
      </view>
      <view class="list_info_wrap" v-if="goodsData.length != 0">
        <!-- <view class="list_tile u-flex"><span></span>鲜切牛肉类</view> -->
        <view class="list_item" v-for="(itemg,indexg) in goodsData" :key="indexg">
          <view class="fucai" style="display: flex;align-items: center"><span></span>{{ itemg.name }}</view>
          <view class="zicai_wrap">
            <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
              <view>{{ items.name }}</view>
              <view>（{{ items.num || '0' }}）</view>
              <view v-if="items.price != '0.00'">¥{{ items.price || '0.00' }}</view>
            </view>
          </view>
        </view>
      </view>

      <view v-else>
        <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
      </view>
    </view>
    <!--晒图-->
    <view id="tabsInfo3" class="details_info4 swpier_wrap">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">探友晒图</view>
      </view>
      <!--    图片滚动区域-->
      <view v-if="blueprintList.length > 0" class="swpier_content">

        <swiper class="swiper" circular next-margin="360rpx"  previous-margin="0rpx" @change="blueprintChange">
          <swiper-item v-for="(item,index) in blueprintList" :key="index" style="border-radius: 12rpx;height: 326rpx">
            <view class="swiper-item">
              <image @click="previewImage(index)" :src="item.image_url" mode="widthFix" style="border-radius: 30rpx"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view v-else>
        <u-empty text="暂无晒图，快去晒图吧" mode="favor" font-size="24" icon-size="60"></u-empty>
      </view>
    </view>
    <!--精选笔记-->
    <view id="tabsInfo4" class="details_info5 selected-notes" :style="isNoteShow ? '': 'background: none;'">
      <!--  精选笔记展示-->
      <view v-if="packageDetails.curated_notes_lists != ''" class="select-notes-content" style="background: #FFFFFF;border-radius: 20rpx">
        <view class="select-notes-icon"><image :src="BestImgUrlBwc+'/home/note_icon_1.png'"></image></view>
        <view class="title" style="display: flex;align-items: center">
          <view class="bef_line"></view>
          <view style="margin-left: 10rpx">精选笔记</view>
        </view>
        <view class="select-notes-subhead" @click="isAddPopService = true">
          <image :src="BestImgUrlBwc+'/home/note_icon_2.png'" class="subImg"></image>
          <view class="select-notes-subhead-content">
            <text style="font-size: 32rpx;padding-left: 38rpx">写笔记赢<text style="color: #F42906;font-size: 35rpx">￥100</text>大奖</text>
            <text>优秀笔记评选</text>
            <text class="textBtn">立即领</text>
          </view>
        </view>
        <view @click="noteShow = true" class="list_info_wrap" style="padding:0;display: flex;align-items: inherit;justify-content: space-between;">
          <!--    图片滚动区域-->
          <view class="swpier_content" style="width: 240rpx">
            <swiper class="swiper" circular :current="noteCurrent" next-margin="0"  previous-margin="0" @change="noteChange" style="margin-top: 0">
              <swiper-item v-for="(item,index) in notesListsImgs" :key="index" style="height: 326rpx;border-radius: 20rpx 0 0 20rpx">
                <view class="swiper-item">
                  <!--@click="previewNoteImage(index)"-->
                  <image  :src="item"></image>
                </view>
              </swiper-item>
            </swiper>
            <!-- 更改指示器样式指示器：数字胶囊 -->
            <view class="number">
              <view class="u-indicator-item-number">{{ noteCurrent + 1 }}/{{ notesListsImgs.length }}</view>
              /*current + 1 指向当前显示的轮播图下标*/
              /*notesListsImgs.length 轮播图页数*/
            </view>
          </view>
          <view class="list_info_wrap_content">
            <view class="list_info_wrap_content_title ellipsis-two-line">{{notesLists.title}}</view>
            <scroll-view :scroll-y="true" scroll-top="0" class="list_info_wrap_content_subtitle">
              <view class="list_info_wrap_content_subtitle_text">{{notesLists.content}}</view>
            </scroll-view>
          </view>
        </view>
      </view>
      <!--没有精选笔记展示默认-->
      <view v-else class="selected-notes-content" style="margin-top: -10rpx">
        <view  class="selected-notes-bg-img">
          <image src="https://td.lszbg.com/public/uploads/h5/home/selectedNotes-bg.png"></image>
        </view>
        <view class="selected-notes-title" style="padding-top: 30rpx">
          <view class="selected-notes-title-text">写笔记赢 <text>￥100</text>大奖</view>
          <view class="selected-notes-subtitle">参加优秀笔记评选，人人可参与</view>
        </view>
        <view class="selected-notes-head">
          <view class="selected-notes-list">
            <view class="selected-notes-list-item">
              <view class="selected-notes-list-item-text">写笔记</view>
              <view class="selected-notes-list-item-subtext">任意0元探店活动笔记可参与</view>
              <view class="selected-notes-list-item-icon"></view>
            </view>
            <view class="selected-notes-list-item">
              <view class="selected-notes-list-item-text" style="color: #F37F2C">添加领食客服登记评选</view>
              <view class="selected-notes-list-item-subtext" style="color: #F37F2C">添加领食客服后发送【笔记评选】登记笔记信息</view>
              <view class="selected-notes-list-item-icon"></view>
            </view>
            <view class="selected-notes-list-item">
              <view class="selected-notes-list-item-text">奖励到账</view>
              <view class="selected-notes-list-item-subtext">由领食评审团评为优秀笔记1-3天奖励到账</view>
              <view class="selected-notes-list-item-icon"></view>
            </view>

          </view>
          <view class="selected-notes-subcont">
            <text class="subcont-btn">限时福利</text>
            <text>浏览量达</text>
            <text style="color: #F37F2C">1000+</text>
            <text>或赞藏评</text>
            <text style="color: #F37F2C">50+</text>
            <text>可获得额外红包</text>
          </view>
        </view>
        <view class="selected-notes-btn" @click="isAddService = true">
          <view class="selected-notes-btn-bg">
            <image :src="BestImgUrlBwc+'/home/selected-notes-btn-bg.png'"></image>
          </view>
          <view class="selected-notes-btn-text">去添加领食客服赢红包</view>
        </view>
      </view>

    </view>
    <!--使用须知-->
    <view id="tabsInfo5" class="details_info6" style="padding: 20rpx 30rpx">
      <shop_detail :days="packageDetails.days" :usage_time="packageDetails.usage_time" :activity_rules="packageDetails.activity_rules"></shop_detail>
    </view>


    <view :style="'height:' + footHeight + 'px'"></view>
    <view class="navigation_wrap">
      <view class="navigation">
        <view class="left u-flex">
          <view class="item" @click="toHome()">
            <image :src="BestImgUrlBwc+'/shop/detail_home@3x.png'"></image>
            <view class="text u-line-1">首页</view>
          </view>
          <view class="item">
<!--            open-type="contact"-->
            <u-button class="btn-1 btn-w"  @click="handleContact">
              <view class="btn_d66">
                <image :src="BestImgUrlBwc+'/shop/detail_kefu@3x.png'"></image>
                <view class="text u-line-1">客服</view>
              </view>
            </u-button>
          </view>
        </view>
        <view class="right_buy" @click="SubOrderShow = true">
          <view class="buy">
            <view class="price">
              <text style="font-size: 24rpx">探店价 ¥</text>
              {{ toFixedTwo(packageDetails.price - packageDetails.rebate_amount) }}
            </view>
            <view class="yuanjia">剩余{{ packageDetails.stock - packageDetails.daily_sales_num }}份 |
              付{{ toFixedTwo(packageDetails.price) }}返{{ toFixedTwo(packageDetails.rebate_amount) }}
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 提交订单弹窗 -->
    <u-popup v-model="SubOrderShow" mode="bottom" border-radius="30" :mask-close-able="false" :closeable="true">
      <view class="SubOrder_wrap">
        <view class="popup_title">报名确认</view>
        <view class="goods_info">
          <view class="u-flex">
            <view>
              <image src="/static/images/shop.png" style="height: 31rpx;width: 31rpx"></image>
            </view>
            <view style="width: 10rpx"></view>
            <view class="text">
              {{ packageDetails.shop_name }}
            </view>
          </view>
          <view style="height: 20rpx"></view>
          <view class="u-flex">
            <view class="goods_img">
              <image :src="packageDetails.logo" mode="aspectFill"></image>
            </view>
            <view class="goods_name">
              <view class="shopname">{{ packageDetails.name }}</view>
              <view class="dizhizu u-flex" style="font-size: 24rpx">
                <text v-if="packageDetails.is_reservation == 2" style="color: #fd6a00;">免预约 | 无需预约</text>
                <text v-if="packageDetails.is_reservation == 1" style="color: #fd6a00;">需预约</text>
                <text>{{weekList.otherNum}}</text>
                均可使用
              </view>
              <view class="info_tags u-flex" style="margin-top: 33rpx">
                <view style="color: #FF5F15">探店价:￥
                  <text style="font-size: 39rpx">{{
                      toFixedTwo(packageDetails.price - packageDetails.rebate_amount)
                    }}
                  </text>
                </view>
                <view style="width: 10rpx"></view>
                <u-tag :text="packageDetails.notes" type="success" size="mini"/>
              </view>

            </view>
          </view>
          <view style="height: 20rpx"></view>
          <u-line></u-line>
          <view style="height: 10rpx"></view>
          <view class="suborder_info" style="padding: 0;margin: 0">
            <view class="subinfo_item u-flex">
              <view style="color: #999999;width: 120rpx">活动要求</view>
              <view style="font-size: 28rpx;">
                到店体验后发布
                <text v-if="packageDetails.is_multi_platform == 1" v-for="(item,index) in packageDetails.note_platforms" :key="index" style="padding-right: 6rpx;">
                  {{ item.title }}
                  <text v-if="index != packageDetails.note_platforms.length - 1" style="padding-left: 6rpx">+</text>
                </text>
                <text v-if="packageDetails.is_multi_platform == 0"  style="padding: 0 6rpx;">1篇</text>
                <text v-if="packageDetails.is_multi_platform == 0" style="padding: 0 6rpx;">{{ packageDetails.platform_type.title }}</text>
                笔记
              </view>
            </view>
            <view class="subinfo_item u-flex">
              <view style="color: #999999">购买平台</view>
              <text>在领食惠探店平台购买套餐</text>
            </view>
            <view class="subinfo_item u-flex">
              <view style="color: #999999">笔记要求</view>
              <text>用心拍摄、用心创作，禁止使用AI</text>
            </view>
          </view>
        </view>
        <view class="suborder_info">
          <view class="subinfo_item u-flex">
            <view style="color: #999999">活动返利</view>
            <text>付{{ toFixedTwo(packageDetails.price) }}
              <text style="color: #FF5F15">返{{ toFixedTwo(packageDetails.rebate_amount) }}</text>
            </text>
          </view>
          <view class="subinfo_item u-flex">
            <view style="color: #999999;flex: 1">探店红包</view>
            <text class="cs"  style="color: #999999;">暂无可用</text>
            <image :src="BestImgUrlBwc + '/user/right@3x.png'"
                   style="width: 12rpx;height: 19rpx;;margin-left: 10rpx"></image>
          </view>
          <view class="subinfo_item u-flex">
            <view style="color: #999999">实际花费</view>
            <text class="cs">{{ toFixedTwo(packageDetails.price - packageDetails.rebate_amount) }}</text>
          </view>
          <view class="huaxjia">
            <text>共计返利
              <text style="color: #FF5F15;margin-left: 8rpx">付{{
                  toFixedTwo(packageDetails.price)
                }}返{{ toFixedTwo(packageDetails.rebate_amount) }}
              </text>
            </text>
          </view>
        </view>
        <!--        <view class="suborder_info u-flex">-->
        <!--          <image :src="BestImgUrlBwc+'/shop/wxpay@2x.png'" style="width: 46rpx;height: 46rpx;"></image>-->
        <!--          <text style="color: #666666;font-size: 28rpx;margin-left: 10rpx">微信支付</text>-->
        <!--          <view style="flex: 1"></view>-->
        <!--          <image :src="BestImgUrlBwc+'/shop/yes@2x.png'" style="width: 28rpx;height: 28rpx;"></image>-->
        <!--        </view>-->
        <view style="height: 98rpx"></view>
        <view class="subBtn" @click="ToBuy()" style="position: relative">
          提交订单
          <text style="margin: 0 10rpx">¥</text>
          {{ toFixedTwo(packageDetails.price) }}
          <view
              style="width: 158rpx;height: 48rpx;position: absolute;right: 20rpx;top: -25rpx;color: #666666;text-align: center">
            <image :src="BestImgUrlBwc+'/shop/fan@2x.png'"
                   style="width: 158rpx;height: 48rpx;position: absolute;right: 0;top:0">
            </image>
            <view style="position: relative;margin: -20rpx;font-size: 24rpx">
              返{{ toFixedTwo(packageDetails.rebate_amount) }}
            </view>
          </view>
        </view>
      </view>
    </u-popup>


    <!--抢单失败弹窗-->
    <u-popup v-model="err_tc_titleShow" mode="center" width="524" border-radius="20" :mask-close-able="false"
             :closeable="true">
      <view class="tc_wrap">
        <view class="tc_images" style="margin: 20rpx 0;">
          <image :src="BestImgUrlBwc + 'shop/failed@3x.png'" mode="aspectFill"></image>
        </view>
        <view style="font-size: 36rpx;color: #3D3D3D;font-weight: bold">报名失败</view>
        <view v-if="is_certified" style="font-size: 28rpx;color: #666666;margin-top: 20rpx;margin-bottom: 20rpx">
          该活动有账号要求，您还未绑定账号
        </view>
        <view v-else style="font-size: 28rpx;color: #666666;margin-top: 20rpx;margin-bottom: 20rpx">
          抢单失败原因如下：
        </view>
        <view style="background-color: #f8f8f8;border-radius: 20rpx;padding: 20rpx;text-align: start;">
          <!--          <view>当前活动要求</view>-->
          <!--          <view>大众点评等级zLv2</view>-->
          <view style="color: #3D3D3D;font-size: 28rpx">{{ err_tc_title }}</view>
          <view style="color: #999999;font-size: 28rpx;margin-top: 10rpx">{{ err_tc_subtitle }}</view>
        </view>
        <!--        <view class="tc_info">-->
        <!--          <view>{{ err_tc_title }}</view>-->
        <!--          <view>{{ err_tc_subtitle }}</view>-->
        <!--        </view>-->
        <view class="tc_btn_box">

          <view class="lijipay1">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="err_tc_titleShow=false">我知道了
            </u-button>
            <!-- #ifdef APP-PLUS || H5 -->
            <!--            <u-button hover-class="none" type="info" shape="circle" :ripple="false"-->
            <!--                      @click="callservice()">联系客服-->
            <!--            </u-button>-->
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <!--            <u-button hover-class="none" type="info" shape="circle" :ripple="false"-->
            <!--                      open-type="contact">联系客服-->
            <!--            </u-button>-->
            <!-- #endif -->
          </view>
          <view class="lijipay">
            <u-button v-if="is_order_type == 1" hover-class="none" type="info" shape="circle" :ripple="false"
                      @click="ObligationFun()">去支付
            </u-button>
            <u-button v-else hover-class="none" type="info" shape="circle" :ripple="false"
                      @click="lijishengji(packageDetails)">去绑定账号
            </u-button>
          </view>

        </view>
      </view>
    </u-popup>

    <!--没有绑定手机提示-->
    <u-popup v-model="BingdingPhone_Popup" mode="center" width="584" border-radius="20" :closeable="true"
             :mask-close-able="false">
      <view class="tc_wrap">
        <view class="guanyu_title">温馨提示</view>
        <view class="wenan"></view>
        <view class="tc_info">您好绑定手机号后才可以进行抢单哦！</view>
        <view class="tc_btn_box">
          <view class="lijipay1" style="margin-right: 0;">
            <u-button hover-class="none" type="info" shape="circle" :ripple="true"
                      @click="BingdingPhone_Popup = false">不用了
            </u-button>
          </view>
          <view class="lijipay" style="margin-left: 10rpx;">
            <u-button hover-class="none" type="info" shape="circle" :ripple="true"
                      open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
                >去绑定
            </u-button>
          </view>
        </view>
      </view>
    </u-popup>


    <u-popup v-model="showUse" mode="bottom" width="750" border-radius="20" :closeable="true"
             :mask-close-able="false">
      <view class="tc_wrap">
        <view class="guanyu_title">使用须知</view>

        <view style="height: 20rpx"></view>
        <u-line></u-line>
        <view style="height: 20rpx"></view>
        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">可用时间</view>
          <view style="font-size: 26rpx;margin-top: 10rpx;color: #666666">报名成功后次日24点前，商家营业时间内</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #cccccc">具体以订单显示核销倒计时为准</view>
        </view>
        <view style="height: 20rpx"></view>

        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">商家营业时间</view>
          <view style="font-size: 26rpx;margin-top: 10rpx;color: #666666"> {{
              packageDetails.open_time
            }}-{{ packageDetails.close_time }}
          </view>
        </view>
        <view style="height: 20rpx"></view>

        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">预约规则</view>
          <view v-if="packageDetails.is_reservation == 2" style="font-size: 26rpx;margin-top: 10rpx;color: #666666"><text style="color: #fd6a00;">免预约 | 无需预约</text>，到店直接使用</view>
          <view v-if="packageDetails.is_reservation == 1" style="font-size: 26rpx;margin-top: 10rpx;color: #666666"><text style="color: #fd6a00;">需要预约</text>，到店才能使用</view>
        </view>
        <view style="height: 20rpx"></view>

        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">使用规则</view>
          <view style="font-size: 26rpx;margin-top: 10rpx;color: #666666">{{packageDetails.activity_rules}}</view>
        </view>
        <view style="height: 60rpx"></view>
        <view style="width: 690rpx;height: 80rpx;background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
              font-size: 32rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;border-radius: 60rpx"
              @click="showUse=false">
          确定
        </view>
        <view style="height: 20rpx"></view>
      </view>
    </u-popup>

    <u-popup v-model="showAsk" mode="bottom" width="750" border-radius="20" :closeable="true"
             :mask-close-able="false">
      <view class="tc_wrap">
        <view class="guanyu_title">笔记要求</view>

        <view style="height: 20rpx"></view>
        <u-line></u-line>
        <view style="height: 20rpx"></view>
        <view style="text-align: start">
          <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">
            在到店体验完成后，按照以下要求发布
            <text v-if="packageDetails.is_multi_platform == 1">{{packageDetails.note_platforms.length}}篇</text>
            笔记即可获得
            <text style="color:#FF7800;">{{ packageDetails.rebate_amount }}</text>
            元现金~
          </view>
          <view
              style="font-size: 26rpx;margin-top: 20rpx;color: #FF7800;background-color: #FFF8E8;padding: 20rpx;border-radius: 20rpx">
            Tips:图片是重点!可参考领食惠探店实拍和探友晒图哦~
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;;font-weight: bold;display: flex">
            <view>笔记平台:</view>
            <view v-if="packageDetails.is_multi_platform == 1" v-for="(item,index) in packageDetails.note_platforms" :key="index">
              {{item.title}}
              <text v-if="index != packageDetails.note_platforms.length - 1" style="padding: 0">+</text>
            </view>
            <view v-if="packageDetails.is_multi_platform == 0">{{packageDetails.platform_type.title}}</view>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">笔记图片</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #666666"> {{ packageDetails.activity_ask }}</view>
          <view @click="copy_hot(subject)"  style="font-size: 26rpx;margin-top: 20rpx;display: flex;justify-content: space-between;">
            <view>
              <view style="font-weight: bold">携带话题</view>
              <view style="height: 10rpx"></view>
              <text style="color: #FF7800" v-for="(itemx,indexx) in subject" :key="indexx">{{ itemx.name }}</text>
              <text style="height: 10rpx;color: #666666">+2个热门自选话题</text>
            </view>
            <view>
              <text style="color: #AAAAAA">轻点复制</text>
              <image :src="BestImgUrlBwc + '/order/copy@2x.png'" style="margin-left: 10rpx;width: 32rpx;height: 32rpx;"></image>
            </view>
          </view>
          <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">自选是否添加门店定位</view>
          <view style="font-size: 24rpx;margin-top: 10rpx;color: #FF7800" @click="Daohang()">{{ packageDetails.address }}</view>
        </view>

        <view style="height: 60rpx"></view>
        <view style="width: 690rpx;height: 80rpx;background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
              font-size: 32rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;border-radius: 60rpx"
              @click="showAsk=false">
          确定
        </view>
        <view style="height: 20rpx"></view>
      </view>
    </u-popup>

    <!--精选笔记弹窗-->
    <u-popup v-model="noteShow" mode="bottom" width="750" height="65%" border-radius="20" :closeable="true">
      <view class="note_pop">
        <view class="note_pop_top">精选笔记</view>
        <scroll-view scroll-y="true" class="note_pop_box">
          <!--    图片滚动区域-->
          <view class="swpier_content" style="margin-top: 20rpx">
            <swiper class="swiper" circular :current="noteCurrent" next-margin="0" :indicator-dots="true"  previous-margin="0" @change="noteChange" style="margin-top: 0;height: 420rpx">
              <swiper-item v-for="(item,index) in notesListsImgs" :key="index">
                <view class="swiper-item"  >
                  <image @click="previewNoteImage(index)" :src="item" style="width: 100%;height: 420rpx; border-radius: 20rpx"></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="note_pop_title">{{notesLists.title}}</view>
          <view class="note_pop_content">{{notesLists.content}}</view>
        </scroll-view>
      </view>
    </u-popup>
    <!--精选笔记添加客服弹窗-->
    <view class="kefu-note">
      <u-popup v-model="isAddPopService" mode="center" width="90%" border-radius="20" :closeable="true">
        <view class="kefu-note-box">
          <view class="kefu-note-box-top">
            <image src="https://td.lszbg.com/public/uploads/h5/home/kefu-note-title.png" mode="widthFix"></image>
          </view>
          <view class="kefu-note-content">
            <view class="kefu-note-bg"><image src="https://td.lszbg.com/public/uploads/h5/home/kefu-note-bg.png" ></image></view>
            <view class="kefu-note-item">
              <view class="kefu-note-title"></view>
              <view class="selected-notes-head">
                <view class="selected-notes-list">
                  <view class="selected-notes-list-item">
                    <view class="selected-notes-list-item-subtext">任意0元探店活动笔记可参与</view>
                    <view class="selected-notes-list-item-icon"></view>
                  </view>
                  <view class="selected-notes-list-item">
                    <view class="selected-notes-list-item-subtext" style="color: #FF3B01">添加领食客服后发送【笔记有礼】登记笔记信息</view>
                    <view class="selected-notes-list-item-icon"></view>
                  </view>
                  <view class="selected-notes-list-item">
                    <view class="selected-notes-list-item-subtext">评为优秀笔记1-3天奖励到账</view>
                    <view class="selected-notes-list-item-icon"></view>
                  </view>

                </view>
                <view class="selected-notes-subcont">
                  <text class="subcont-btn">限时福利</text>
                  <text>浏览量达</text>
                  <text style="color: #F37F2C">1000+</text>
                  <text>或赞藏评</text>
                  <text style="color: #F37F2C">50+</text>
                  <text>可获得额外红包</text>
                </view>
              </view>
              <view class="selected-notes-btn" @click="isAddService = true">
                <view class="selected-notes-btn-text">去添加领食客服赢红包</view>
              </view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
    <!--扫码添加客服-->
    <u-popup v-model="isAddService" mode="center" width="80%" border-radius="20" style="z-index: 1000000">
      <view style="text-align: center;font-size: 32rpx;padding-top: 30rpx">添加客服微信优惠信息及时享</view>
      <view style="text-align: center;padding: 50rpx;">
        <image :show-menu-by-longpress="true" src="https://td.lszbg.com/public/uploads/h5/home/ServiceRWM2.jpg" mode="widthFix" style="width: 300rpx"></image>
      </view>
    </u-popup>
    <!--探店无忧险弹窗-->
    <u-popup v-model="isShowTD" mode="center" :border-radius="20" width="65%" closeable @close="isShowTD = false" >
      <view class="popup-content" style="text-align: center;padding: 30rpx;">
        <view class="popup-title" style="font-size: 30rpx;margin-bottom: 20rpx;">探店无忧险</view>
        <view><u-line color="#F0F0F0"></u-line></view>
        <view class="popup-text" style="font-size: 26rpx;margin-top: 20rpx;line-height: 50rpx;text-align: left;">
          <text style="color: #FF4E0D;padding:0 10rpx;">无需预约</text>或已按要求提前致电预约的门店，到店后如因商家问题不接待无法核销，需现场拍摄商家门面信息在
          <text style="color: #FF4E0D;padding:0 10rpx;">9:30-22:00咨询4008887591</text>或在线客服处理，超过客服工作时间可在~在线客服留言并发送照片保留证据！平台客服核实后补偿一定补贴，
          <text style="color: #FF4E0D;padding:0 10rpx;">注：未留下证据</text>可能无法得到无忧险，无忧险
          <text style="color: #FF4E0D;padding:0 10rpx;">只限当天有效</text>，请仔细阅读！</view>
      </view>
    </u-popup>
    <!--电话弹窗-->
    <u-popup v-model="isTel" mode="bottom" border-radius="20" :closeable="true" :safe-area-inset-bottom="true">
      <view class="tel_popup">
        <view class="tel_title">订单电话</view>
        <u-line hair-line color="#F3F3F3"></u-line>
        <view class="tel_box">
          <view v-if="TelData.PlatformPhone" class="tel_item">
            <view class="tel_text">平台电话：</view>
            <view @click="PlatformPhoneFun(TelData.PlatformPhone)" class="tel_val">{{ TelData.PlatformPhone }}</view>
          </view>
          <view v-else  @click="handleContact" class="tel_item">
            <view class="tel_text">没有平台电话，请点击客服</view>
            <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
          </view>
          <u-line hair-line color="#F3F3F3"></u-line>
          <view class="tel_item">
            <view class="tel_text">商家电话：</view>
            <view @click="shopsPhoneFun(TelData.shopsPhone)" class="tel_val">{{ TelData.shopsPhone }}</view>
          </view>
        </view>
        <u-line hair-line color="#F3F3F3"></u-line>
      </view>
    </u-popup>

    <!-- #ifdef MP-WEIXIN -->
    <!--    <view class="kefu_Boxs">-->
    <!--      <button type="default" open-type="contact">-->
    <!--        <image class="kefu_icon" :src="BestImgUrl+'/PackageDetails/kefuicon.png'"></image>-->
    <!--      </button>-->
    <!--    </view>-->
    <!-- #endif -->


  </view>
</template>

<script>

import Shop_detail from "../../../components/shop/shop_detail.vue";
import {baseUrl} from "@/api/request";
// import style from "uview-ui/libs/mixin/style";
// import wx from "weixin-js-sdk";

const app = getApp();
export default {
  components: {Shop_detail},
  data() {
    return {
      statusBarHeight: 0, //状态栏高度
      topBoxHeight: 0, //顶部导航栏高度和tabs 高度
      footHeight: 0, //底部导航栏高度
      tempFilePath: '', // 临时图片路径
      share_width: '',
      share_height: '',
      share_bg: "",
      avatar_url: "",
      shops_logo: "",
      showUse: false,
      showAsk: false,
      baseUrl: baseUrl,
      BestImgUrl: app.globalData.imgurl,
      BestImgUrlBwc: app.globalData.imgurlBwc,
      background: {
        backgroundColor: 'none',
      },
      NavTitle: '', //页面标题
      //详情页面banner轮播
      swiperlist: [],
      swpierIdx: 0,
      //晒图轮播
      blueprintList: [],
      blueprintIdx: 0,
      //精选轮播
      notesLists: [],
      notesListsImgs: [],
      noteCurrent: 0,
      isNoteShow: true,
      noteShow: false,
      isAddService: false, //扫码添加客服
      isAddPopService: false, //扫码添加弹窗客服

      package_id: '', //套餐详情ID
      shopsID: '', //店铺ID
      packageDetails: {}, // 套餐详情数据
      subject: [],
      goodsData: [],
      err_tc_title: '', //抢单错误提示
      err_tc_subtitle: '', //抢单错误副标题
      err_tc_titleShow: false, //抢单错误弹窗
      is_certified: 0, //-1是未认证 1是认证审核中
      weekList: {//获取使用须知、规则时间数据
        maxNum: '',
        minNum: '',
        otherNum: '',
      },
      SubOrderShow: false,
      BingdingPhone_Popup: false,
      DQRenZhengData: {},
      isBlckHomeBtn: false,
    //   获取滚动条高度
      scHeight: 0,
      tabsHeight: '',// tabs高度
    //  tabs数据
      showTabs: false, // 默认吸顶的tab不显示
      currentTab: -1, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
      distanceArr: [], // 每一个ID对应的scrollTop值
      isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
      packTabList: [
        {
          id: '#tabsInfo1',
          name: '活动',
          is_active: true
        },
        {
          id: '#tabsInfo2',
          name: '详情',
          is_active: false
        },
        {
          id: '#tabsInfo3',
          name: '晒图',
          is_active: false
        },
        {
          id: '#tabsInfo4',
          name: '笔记',
          is_active: false
        },
        {
          id: '#tabsInfo5',
          name: '须知',
          is_active: false
        },
      ],
    // 平台账号信息数据
      noteDataList: [//添加平台账号数据
        //{id: 0, title: '绑定账号', type: 0, name: '上传', subtitle: ''},
        {id: 1, title: '小红书', type: 1, name: '添加小红书', subtitle: '上传小红书我的页面', content: '打开小红书APP，进入【我】页面截图上传'},
        {id: 2, title: '大众点评', type: 3, name: '添加大众点评', subtitle: '上传大众点评个人中心页面', content: '开大众点评APP，进入【我的】页面，截图上传；\n大众点评小程序，进入【我的】页面，点击“个人主页”截图上传'},
      ],
    //  当出现“当前店铺存在未支付订单”变量
      is_order_type: false,
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/douyin@2x.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
          fileList: [],
        },

      ],
      isShowTD: false, //探店无忧险弹窗
      isTel: false,// 是否显示电话弹窗
      TelData: {
        PlatformPhone: '',
        shopsPhone:'',
      }, // 电话弹窗数据
    }
  },
  onLoad(ops) {
    console.log('package_id', ops.package_id)
    let that = this
    let token = uni.getStorageSync('token')
    that.statusBarHeight =  uni.getSystemInfoSync().statusBarHeight;
    that.package_id = ops.package_id
    that.GetDatails()
    //获取底部导航栏高度
    uni.createSelectorQuery().select('.navigation_wrap').boundingClientRect(rect => {
      that.footHeight = rect.height + 10
    }).exec();
    //先静默登录
    // #ifdef MP-WEIXIN
    // if (!token) {
    // 	uni.login({
    // 		provider: 'weixin',
    // 		success: function(login_res) {
    // 			that.$api.wxminiappLogon({
    // 				code: login_res.code,
    // 				avatar: that.BestImgUrl + '/home_logo.png', //	是	string	用户头像
    // 				nickname: '领食惠探店用户',
    // 				username: '',//手机号
    // 				appid: uni.getStorageSync('miniProgramAppId')
    // 			}).then(res => {
    // 				//console.log('微信小程序登录', res)
    // 				uni.setStorageSync('token', res.data.result.token)
    // 				setTimeout(() => {
    // 					that.$api.GetuserInfo({

    // 					}).then(res => {
    // 						uni.setStorageSync('userinfo',res.data.result)
    // 					}).catch(err => {});
    // 				}, 500);
    // 			}).catch(err => {})
    // 		},
    // 		fail: function(err) {}
    // 	});
    // } else {
    // 	this.GetUserInfo()
    // }
    console.log('二维码信息', ops)
    //绑定推荐人-小程序端
    if (JSON.stringify(ops) != '{}') {
      let pdi = {
        parent_id: ops.parent_id,
        reseller_id: {
          reseller_id: uni.getStorageSync('reseller_id') || ''
        }
      }
      app.globalData.bindSaveParentId(pdi);
    } else {
      //ops为空
    }
    // #endif

    if (ops.isshare == "1") {
      that.isBlckHomeBtn = true
    } else {
      that.isBlckHomeBtn = false
    }

  },
  onPageScroll(e) {
    if (e.scrollTop >= 1) {
      this.background.backgroundColor = '#ffffff'
      this.NavTitle = '套餐详情'
      this.scHeight = e.scrollTop
    } else {
      this.background.backgroundColor = 'transparent'
      this.NavTitle = ''
    }
  //  页面滚动监听tabs
    if (this.isTabChange) {
      return
    }
    const scrollToTop = e.scrollTop;
    const skewY = 128 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
    //console.log('skewY', skewY ,scrollToTop)
    // console.log('模块的高度==',this.distanceArr)
    if (scrollToTop >= skewY) {
      if (!this.showTabs && this.currentTab <= 0) { // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
        this.currentTab = 0
      }
      this.showTabs = true
      this.$nextTick(() => {
        const length = this.distanceArr.length
        const index = this.distanceArr.findIndex(el => el - skewY - scrollToTop > 0)
        // 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
        // 当index > 0 的时候，说明能在当前的scrollToTop值找到，即index的前一位
        this.currentTab = index > 0 ? index - 1 : length - 1
      })
    } else if(scrollToTop < skewY) {
      this.showTabs = false
    }

  },
  onShow() {
    let token = uni.getStorageSync('token')
    if (!token) {

    } else {
      this.GetUserInfo()
    }
    //页面加载通过tabs获取页面对应元素的高度的方法
    this.getDistanceArr()
  },
  methods: {
    // 点击按钮触发截图
    captureArea() {
      let that = this;
      const ctx = uni.createCanvasContext('mycanvas', this);

      setTimeout(() => {
        //创建海报背景图
        ctx.drawImage(that.share_bg, 0, 0, that.share_width, that.share_height);
        // 设置底部圆角矩形的参数
        const x = 0;//横向位置
        const y = 344;//纵向位置
        const width = 500;
        const height = 56;
        const radius = 20;
        // 开始绘制
        ctx.beginPath();
        // 左上角
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        // 右上角
        ctx.lineTo(x + width, y + height - 0);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        // 右下角
        ctx.lineTo(x + 0, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        // 左下角
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        // 关闭路径
        ctx.closePath();
        // 设置填充色或者线条样式
        ctx.setFillStyle('#FF4E0D');
        ctx.fill();


        //探店价文字
        ctx.setFillStyle('#ffffff'); //文字颜色
        ctx.setFontSize(16); //设置字体大小
        ctx.fillText('探店价', 15, 380);//文字内容、x坐标，y坐标

        //创建先付后返
        let xfhf = '=先付¥' + that.packageDetails.price + '元-探店后返¥' + that.packageDetails.rebate_amount
        ctx.setFillStyle('#ffffff'); //文字颜色
        ctx.setFontSize(16); //设置字体大小
        ctx.fillText(xfhf, 156, 382);//文字内容、x坐标，y坐标

        //创建探店价格
        let tdj = '¥' + (that.packageDetails.price - that.packageDetails.rebate_amount).toFixed(2)
        ctx.font = 'bold 30px Arial';//加粗字体
        ctx.setFillStyle('#ffffff'); //文字颜色
        ctx.fillText(tdj, 70, 382);//文字内容、x坐标，y坐标

        console.log(6)

        ctx.draw(true, () => {
          console.log(7)
          // 绘制完成后的操作
          uni.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (resulat) {
              console.log('执行到这里了吗', resulat)
              that.tempFilePath = resulat.tempFilePath
            },
            fail: function (err) {
              uni.showToast({
                title: err.errMsg,
                icon: 'none',
                duration: 3000
              })
              console.log('绘制完错误', err)
            }
          }, this)
        });
      }, 1500)
    },

    // 动态创建 Canvas
    createCanvas(width, height) {
      return new Promise((resolve) => {
        const query = wx.createSelectorQuery();
        query.select('#myCanvas')
            .fields({
              node: true,
              size: true
            })
            .exec((res) => {
              const canvas = res[0].node;
              const dpr = wx.getSystemInfoSync().pixelRatio;
              canvas.width = width * dpr;
              canvas.height = height * dpr;
              resolve(canvas);
            });
      });
    },
    // 保存图片到相册
    saveImage() {
      wx.saveImageToPhotosAlbum({
        filePath: this.tempFilePath,
        success: () => wx.showToast({
          title: '保存成功'
        }),
        fail: () => wx.showToast({
          title: '保存失败',
          icon: 'none'
        }),
      });
    },

    GetUserInfo() {
      let that = this
      that.$api.GetuserInfo({}).then(res => {
        uni.setStorageSync('userinfo', res.data.result)
      }).catch(err => {

      });
    },
    toFixedTwo(val) {
      var str = Number(val).toFixed(2)
      return str;
    },
    toFixedZ(val){
      var str = Number(val).toFixed(0)
      return str;
    },
    GetDatails() {
      let that = this
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      that.$api.getpackageDetails({
        package_id: that.package_id,
        lat: lat,
        lng: lon
      }).then(res => {
        console.log('详情', res.data.result);
        //店铺ID赋值
        that.shopsID = res.data.result.shop_id
        that.packageDetails = res.data.result
        that.subject = res.data.result.subject
        that.goodsData = res.data.result.goods
        //详情banner轮播
        that.swiperlist = res.data.result.images
        //晒图轮播
        that.blueprintList = res.data.result.showcase_lists
        //精选轮播
        if(res.data.result.curated_notes_lists == ''){
          that.isNoteShow = false
        }else{
          that.notesLists = res.data.result.curated_notes_lists
          that.notesListsImgs = JSON.parse(res.data.result.curated_notes_lists.images.replace(/\\/g, ''))
          console.log('精选', that.notesListsImgs)
        }
        // 重置单平台数据
        let noteItem = {}
        that.platformData.forEach((item, index) => {
          if (item.platformType == that.packageDetails.platform_type) {
            noteItem = {
              platformType: item.platformType,
              title: item.title,
              image: that.BestImgUrlBwc + item.image,
            }
          }
        })
        that.packageDetails.platform_type = noteItem
        //处理多平台数据
        if(that.packageDetails.note_platforms){
          //console.log('精选', that.packageDetails.note_platforms)
          const noteArr = []
          const note = JSON.parse(that.packageDetails.note_platforms)
          note.forEach((item, index) => {
            that.platformData.forEach((item2, index2) => {
              if (item2.platformType == item) {
                noteArr.push({
                  platformType: item2.platformType,
                  title: item2.title,
                  image: that.BestImgUrlBwc + item2.image,
                })
              }
            })
          });
          that.packageDetails.note_platforms = noteArr
        }
        //把数组字符串转换为数组数字
        let weekArr = Object.values(res.data.result.week).map(item => parseInt(item))
        //改变数据类型
        const weekData = weekArr.map(num => ({
          1: {title: '一', num: '1'},
          2: {title: '二', num: '2'},
          3: {title: '三', num: '3'},
          4: {title: '四', num: '4'},
          5: {title: '五', num: '5'},
          6: {title: '六', num: '6'},
          7: {title: '日', num: '7'}}[num]));
        //判断是否连续
        if(this.isArrayContinuous(weekArr)){
          weekData.forEach((item, index) => {
            if (item.num == Math.max(...weekArr)) {
              that.weekList.maxNum = "星期"+item.title
            } else if(item.num == Math.min(...weekArr)) {
              that.weekList.minNum = "星期"+item.title
            }
          });
          that.weekList.otherNum = that.weekList.minNum + "到" + that.weekList.maxNum
          //console.log('是连续数字',that.weekList)
        }else{
          weekData.forEach((item, index) => {
            that.weekList.otherNum += "星期"+item.title+","
          })
          //console.log('不是连续数字')
        }
        //console.log('套餐详情', that.weekList);

        uni.getImageInfo({
          src: res.data.result.images[0],
          success: function (resxxx) {
            console.log('海报背景', resxxx)
            that.share_width = 500//resxxx.width
            that.share_height = 400//resxxx.height
            that.share_bg = resxxx.path
          }
        });

        that.ShaiXuan()

        that.captureArea()//画图

      }).catch(err => {

      })
    },
    //计算数组是否连续
    isArrayContinuous(arr) {
      const min = Math.min(...arr);
      const max = Math.max(...arr);
      const expectedLength = max - min + 1; // 计算理论上应有的长度
      const seen = new Set(arr); // 使用Set来记录已经出现的数字

      // 检查是否所有数字都出现过
      for (let i = min; i <= max; i++) {
        if (!seen.has(i)) {
          return false;
        }
      }
      return true;
    },
    //详情banner轮播
    changeS(e) {
      this.swpierIdx = e
    },
    //晒图轮播
    blueprintChange(e){
      console.log("晒图轮播==", e.detail.current)

    },
    //精选轮播
    noteChange(e){
      this.noteCurrent = Number(e.target.current)
    },
    Fanhui() {
      if (this.isBlckHomeBtn) {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      } else {
        uni.navigateBack()
      }

    },
    ToBuy() {
      let that = this
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      } else {
        let Phone = uni.getStorageSync('userinfo').username
        //先判断是否绑定手机号
        if (!Phone) {
          that.BingdingPhone_Popup = true
        } else {
          that.$api.postPackageDoOrder({
            shop_package_id: that.packageDetails.id
          }).then(res => {
            console.log('订购', res.data.result)

            let order_id = res.data.result.order_id
            let shopName = that.packageDetails.name
            let price = that.packageDetails.price //(that.packageDetails.price - that.packageDetails.rebate_amount)
            that.SubOrderShow = false

            uni.navigateTo({
              url: '/subpackageA/pages/PaymentOrders/PaymentOrders?order_id=' + order_id + '&name=' + shopName + '&price=' + price
            })
          }).catch(err => {
            console.log('失败', err)
            that.err_tc_titleShow = true
            that.err_tc_title = err.data.result.title
            that.err_tc_subtitle = err.data.result.sub_title
            that.is_certified = err.data.result.is_certified
            that.is_order_type = err.data.result.type
          });
        }
      }


    },
    // 复制笔记要求弹窗-热门话题
    copy_hot(order_hot) {
      let hotText = ''
      order_hot.forEach(item => {
        hotText += item.name
      })
      console.log('热门话题=', hotText)
      uni.setClipboardData({
        data: hotText, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '话题-复制成功',
            icon: 'none'
          })
        }
      });
    },
    Daohang() {
      wx.openLocation({
        latitude: Number(this.packageDetails.latitude),
        longitude: Number(this.packageDetails.longitude),
        scale: 18,
        name: this.packageDetails.shop_name,
        address: this.packageDetails.address
      });
    },
    Tel() {
      var reservePhone = this.packageDetails.reserve_phone
      if(reservePhone.length > 0){
        if(reservePhone[0] !== ""){
          this.packageDetails.tel = reservePhone[0]
        }
      }
      this.TelData.shopsPhone = this.packageDetails.tel
      this.TelData.PlatformPhone = this.packageDetails.customer_service_phone
      this.isTel = true
      /* uni.showModal({
        title: '礼貌用语，文明探店',
        content: '老板您好！我是在领食惠探店买的套餐来的探店的达人，现在可以过来用吗?',
        confirmText: '打电话',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: tel, // 电话号码
              success: function () {
                console.log('拨打电话成功');
              },
              fail: function () {
                console.log('拨打电话失败');
              }
            });
          }
        }
      }) */
      console.log('拨打电话', this.packageDetails.tel)
      /* uni.makePhoneCall({
        phoneNumber: this.packageDetails.tel, // 电话号码
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      }); */
    },
    // 平台电话事件
    PlatformPhoneFun(tel){
      uni.makePhoneCall({
        phoneNumber: tel,
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      })
    },
    // 商家电话事件
    shopsPhoneFun(tel){
      uni.showModal({
        title: '礼貌用语，文明探店',
        content: '老板您好！我是在领食惠探店买的套餐来的探店的达人，现在可以过来用吗?',
        confirmText: '打电话',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: tel,
              success: function () {
                console.log('拨打电话成功');
              },
              fail: function () {
                console.log('拨打电话失败');
              }
            })
          }
        }
      })
    },
    //拉起客服
    callservice() {
      let data = uni.getStorageSync('customerServiceData')

      // #ifdef H5
      window.location.href = data.h5.url
      // #endif

      // #ifdef APP-PLUS
      let appurl = data.app.url
      uni.navigateTo({
        url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(appurl))
      })
      // #endif
    },
    LianXiKeFu: function () {
      try {
        let data = uni.getStorageSync('customerServiceErWeima')
        console.log('客服链接', data)

        wx.openCustomerServiceChat({
          extInfo: {
            url: data.path //客服ID
          },
          corpId: data.appid, //企业微信ID
          success(res) {
            uni.showToast({title:'"请更新至微信最新版本"',icon:'success'})
          }
        })
      } catch (error) {
        showToast("请更新至微信最新版本")
      }
    },

    // 订单详情跳转到客服
    handleContact(){
      const data = uni.getStorageSync('customerServiceData')
      console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          console.log('跳转成功', res)
        },
        fail(res) {
          console.log('跳转失败', res)
        }
      })

    },
    lookmyOrder() {
      uni.switchTab({
        url: '/pages/order/order'
      })
    },
    Torenzheng() {
      uni.navigateTo({
        url: '/subpackageA/pages/Certification/Certification?LaiYuan=' + 1
      })
    },


    //筛选出对应平台的认证信息
    ShaiXuan() {
      let that = this
      that.$api.notCertifiedPlatform({}).then(res => {
        console.log('未认证列表', res.data.result);
        that.WeiRenZhengList = res.data.result
        let myLevelData = {}
        res.data.result.forEach(function (item, index) {
          if (that.packageDetails.platform_type == item.platform_type) {
            myLevelData = item
          }
        });
        that.DQRenZhengData = myLevelData

      }).catch(err => {

      });
    },
    lijishengji(res) {
      console.log('lijishengji', res);
      let that = this
      that.err_tc_titleShow = false
      that.noteDataList.forEach(function (item, index) {
        if (item.type === res.platform_type.platformType) {
          uni.navigateTo({
            url: '/sub_account/pages/add_note?upDa=' + encodeURIComponent(JSON.stringify(res)) + '&data=' + encodeURIComponent(JSON.stringify(item))
          })
        }
      })
      /*if (type == 3) {
        //去升级
        uni.navigateTo({
          url: '/sub_account/pages/add_note?title=添加小红书&isAdd=0&type=' + that.packageDetails.platform_type
        })
      } else {
        //去认证小红书
        uni.navigateTo({
          url: '/sub_account/pages/add_note?title=大众点评&isAdd=true&type=' + that.packageDetails.platform_type
        })
        return
        let ptData = {
          label: that.DQRenZhengData.platform_name,
          value: that.DQRenZhengData.platform_type,
          screenshot_example: that.DQRenZhengData.screenshot_example,
          url_example: that.DQRenZhengData.url_example
        }
        uni.navigateTo({
          url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + 0
        })

      }
      return
      if (type == 2) {
        //去认证抖音
        // uni.navigateTo({
        // 	url: '/subpackageA/pages/Certification/Certification?LaiYuan=' + 1
        // })
        let ptData = {
          label: that.DQRenZhengData.platform_name,
          value: that.DQRenZhengData.platform_type,
          screenshot_example: that.DQRenZhengData.screenshot_example,
          url_example: that.DQRenZhengData.url_example
        }
        uni.navigateTo({
          url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + 0
        })
      } else if (type == 3) {
        //去认证大众点评
        // uni.navigateTo({
        // 	url: '/subpackageA/pages/Certification/Certification?LaiYuan=' + 1
        // })
        uni.navigateTo({
          url: '/sub_account/pages/add_note?title=添加大众点评&isAdd=true&type=' + type
        })
        return;
        let ptData = {
          label: that.DQRenZhengData.platform_name,
          value: that.DQRenZhengData.platform_type,
          screenshot_example: that.DQRenZhengData.screenshot_example,
          url_example: that.DQRenZhengData.url_example
        }
        uni.navigateTo({
          url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + 0
        })
      } else if (type == 4) {
        //去认证美团
        // uni.navigateTo({
        // 	url: '/subpackageA/pages/Certification/Certification?LaiYuan=' + 1
        // })
        let ptData = {
          label: that.DQRenZhengData.platform_name,
          value: that.DQRenZhengData.platform_type,
          screenshot_example: that.DQRenZhengData.screenshot_example,
          url_example: that.DQRenZhengData.url_example
        }
        uni.navigateTo({
          url: '/subpackageA/pages/Addapprove/Addapprove?data=' + encodeURIComponent(JSON.stringify(ptData)) + '&LaiYuan=' + 0
        })
      }*/
    },
    //出现“当前店铺存在未支付订单”，则跳转到订单待付款列表
    /* ObligationFun() {
      uni.setStorageSync('ObligationFun', 7)
      uni.switchTab({
        url: '/pages/orders/orders'
      })
    }, */
    //微信授权绑定手机号
    getPhoneNumber(e){
      //console.log('用户信息==',e.detail)
      this.$api.getWXPhoneNumber({
        code: e.detail.code,
        encryptedData: e.detail.encryptedData
      }).then(res => {
        uni.showToast({title:'手机号绑定成功！',icon:'success'})
        this.BingdingPhone_Popup = false
        setTimeout(() => {
          uni.redirectTo({
            url: '/subpackageA/pages/PackageDetails/PackageDetails?package_id=' + this.package_id
          })
        }, 1000)
      }).catch(err => {
        console.log('获取用户信息', err.data.msg)
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
    onShareAppMessage() {
      let myid = uni.getStorageSync('userinfo').id
      return {
        title: this.packageDetails.name,
        path: '/subpackageA/pages/PackageDetails/PackageDetails?parent_id=' + myid + '&package_id=' + this.package_id + '&isshare=1',
        imageUrl: this.tempFilePath,
        success: (res) => {

        },
        fail: (res) => {

        }
      }
    },
    // 分享朋友圈
    onShareTimeline() {
      let myid = uni.getStorageSync('userinfo').id
      return {
        title: this.packageDetails.name,
        query: '/subpackageA/pages/PackageDetails/PackageDetails?parent_id=' + myid + '&package_id=' + this.package_id + '&isshare=1',
        imageUrl: this.tempFilePath,
        success: (res) => {

        },
        fail: (res) => {

        }
      }
    },
    toHome(){
      uni.switchTab({url: '/pages/index/index'})
    },
    ToShopsDetails() {
      uni.navigateTo({
        url: '/subpackageB/pages/shopsDetails/shopsDetails?package_id=' + this.package_id + '&shops_id=' + this.shopsID
      })
    },
  //   进入群聊事件
    goToGroup(){
      uni.navigateTo({
        url: '/subpackageB/pages/welfareGroup/welfareGroup'
      })
    },
    // 获取所有元素在当前页面所处的位置信息
    getDistanceArr () {
      const _this = this
      _this.packTabList.map(el => {
        uni.createSelectorQuery().select(el.id).boundingClientRect(data => {
          // 获取当前ID距离顶部的top值
          _this.distanceArr.push(data.top)
        }).exec()

      })
    },
    //tabs点击导航栏页面跟随滚动
    uTabsChange(item) {
      console.log('item',item)
      this.isTabChange = true
      let that = this
      // this.$nextTick 保证当前isTabChange 为true后执行代码
      // 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
      this.$nextTick(() => {
        that.currentTab = item.index;
        uni.createSelectorQuery().select(item.id).boundingClientRect(data => {
          uni.createSelectorQuery().select('.pack-container').boundingClientRect(rect => {
            uni.createSelectorQuery().select('.top_box').boundingClientRect(topRect => {
              console.log('data',data)
              const scrollTop = data.top - rect.top; // 获取差值
              const skewY = topRect.height // 偏移
              // 页面开始进行滚动到目标位置
              uni.pageScrollTo({
                duration: 300,
                scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
                complete: () => {
                  const timer = setTimeout(() => {
                    that.isTabChange = false // 关闭
                    clearTimeout(timer);
                  }, 300);// 解决ios和安卓、鸿蒙系统兼容性问题
                }
              })
            }).exec();
          }).exec();
        }).exec();
      })
    },
    //  晒图点击图片放大特效
    previewImage (e){
      const that = this
      const imgUrlArr = []
      //重组image图片数组
      that.blueprintList.forEach(item => {
        imgUrlArr.push(item.image_url)
      })
      //图片放大预览
      uni.previewImage({
        urls: imgUrlArr,
        current: e,
        indicator: 'number',
        success: function (res) {
          console.log("成功success=",res)},
        fail: function (res) {
          console.log("失败fail=",res)},
        complete: function (res) {
          console.log("完成complete=",res)},
      })
    },
  //  精选笔记
    previewNoteImage(e){
      const that = this
      //图片放大预览
      uni.previewImage({
        urls: that.notesListsImgs,
        current: e,
        indicator: 'number',
        success: function (res) {
          console.log("成功success=",res)},
        fail: function (res) {
          console.log("失败fail=",res)},
        complete: function (res) {
          console.log("完成complete=",res)},
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #F4F4F4;
}

.text_color {
  color: #fd6a00;
}
.bef_line {
  width: 10rpx;
  border-radius: 20rpx;
  height: 30rpx;
  background-color: #fd6a00;
}

.mycanvassss {
  position: fixed;
  top: -999999px;
  opacity: 0;
  left: -999999px;
}

.kefu_Boxs {
  position: fixed;
  z-index: 1000;
  z-index: 9992;
  bottom: 200rpx;
  right: 0;
  background-color: #ffffff;
  padding: 10rpx 30rpx 10rpx 10rpx;
  border-radius: 200rpx 0 0 200rpx;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.10);
  margin: 10px 0 10px 5px; //让出阴影位置

  .kefu_icon {
    width: 70rpx;
    height: 70rpx;
  }

  /deep/ button {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  /deep/ button::after {
    border: none !important;
  }
}

.details_info3, .details_info4, .details_info5 {
  padding: 32rpx 28rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  margin: 20rpx 30rpx;

  .title {
    font-size: 30rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    width: 200rpx;
    height: 54rpx;
    margin-bottom: 28rpx;
  }

  .list_info_wrap {
    align-items: center;
    padding: 0 22rpx 0 22rpx;
    margin-top: 20rpx;

    .list_tile {
      color: $zzy-text-color-333333;
      font-weight: bold;
      font-size: 28rpx;
      align-items: center;

      span {
        display: inline-block;
        width: 9rpx;
        height: 9rpx;
        border-radius: 200rpx;
        background-color: $zzy-text-color-999999;
        margin-right: 10rpx;
      }
    }

    .list_item {
      align-items: flex-start;
      margin-top: 20rpx;
      padding-left: 0;

      .fucai {
        font-size: 28rpx;
        color: $zzy-text-color-333333;
        flex: 1;
        font-weight: bold;

        span {
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          background-color: #d4d4d4;
          border-radius: 200rpx;
          margin-right: 14rpx;
        }
      }

      .zicai_wrap {
        padding-left: 22rpx;
      }

      .zicai {
        margin-top: 12rpx;

        view:nth-child(1) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          flex: 1;
        }

        view:nth-child(2) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          margin-left: auto;
        }

        view:nth-child(3) {
          font-size: 28rpx;
          color: $zzy-text-color-666666;
          font-weight: bold;
          margin-left: auto;
        }
      }
    }
  }
  .swpier_content{
    width: 100%;
    height: 320rpx;
    overflow: hidden;
    position: relative;
    .swiper {
      height: 320rpx;
      margin-top: 20rpx;
      .swiper-item {
        display: block;
        width:260rpx;
        height: 320rpx;
        image {
          height: 320rpx;
          width: 260rpx;
        }
      }
    }
    /* 指示器样式 */
    .u-indicator-item-number {
      width: 40px;
      padding: 10rpx;
      line-height: 1;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 100rpx;
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      right: 2%;
      bottom: 3%;
      text-align: center;
      letter-spacing: 3rpx;
    }
  }


}

.details_info2 {
  position: relative;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  margin: 0 30rpx;
  // 必看
  .mustSee{
    position: absolute;
    bottom: 118rpx;
    right: 10rpx;
    z-index: 5;
    padding: 5rpx 13rpx;
    color: #FFFFFF;
    font-size: 12rpx;
    border-radius: 16rpx 16rpx 16rpx 0;
    background: linear-gradient(to right, #fc8635 0%, #ec1e2c 100%);
  }
  .title {
    font-size: 30rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    width: 200rpx;
    height: 54rpx;
    margin-bottom: 28rpx;
  }

  .info_list {
    padding: 0 20rpx 0 20rpx;
    margin-top: 28rpx;
    align-items: flex-start;

    view {
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      font-weight: 500;
    }

    span {
      padding: 0 0 0 20rpx;
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      display: inline-block;
      flex: 1;
    }

    /* text {
      padding: 0 0 0 20rpx;
      color: $zzy-text-color-333333;
      font-size: 28rpx;
      flex: 1;
    } */
  }
}

.details_info1 {
  padding: 20rpx 30rpx;
  border-radius: 0 0 28rpx 28rpx;

  .info_title {
    font-size: 33rpx;
    font-weight: bold;
    margin-bottom: 14rpx;
  }

  .info_tags {
    margin-bottom: 28rpx;

  }

  .info_list {
    .info_list_item {
      font-size: 28rpx;
      margin-bottom: 12rpx;

      .hongse {
        color: #FF4E0D;
      }

      text {
        color: $zzy-text-color-333333;
        margin-right: 10rpx;
        //font-weight: bold;
      }

      view {
        color: $zzy-text-color-666666;
      }
    }
  }

  .info_address {
    align-items: center;
    justify-content: space-between;
    border-radius: 28rpx;
    background-color: #FFFFFF;
    padding: 28rpx;
    margin-top: 20rpx;

    .info_address_left {
      flex: 1;

      .left_1 {
        font-weight: bold;
        font-size: 28rpx;
        align-items: center;
      }

      .left_2 {
        align-items: center;
        margin-top: 12rpx;
        color: $zzy-text-color-666666;
        font-size: 28rpx;

        .text-Omit {
          -webkit-line-clamp: 1;
        }

        .u-icon {
          margin-right: 10rpx;
        }
      }
    }

    .info_address_right {
      margin-top: 20rpx;
      align-items: center;
      justify-content: center;

      .right_1 {
        text-align: center;
        flex: 1;
        margin: 0 0 0 30rpx;

        image {
          width: 46rpx;
          height: 46rpx;
          margin-bottom: 6rpx;
        }

        color: $zzy-text-color-666666;
        font-size: 22rpx;
      }
    }
  }
}
//详情页面中间横幅css
.details_group_chat {
  position: relative;
  padding: 20rpx 14rpx;
  border-radius: 28rpx;
  margin: 20rpx 30rpx;
  background: url("https://td.lszbg.com/public/uploads/h5/shop/shop_details_group_bg.png") no-repeat;
  background-size: 100% 100%;
  .details_group_chat_title {
    padding-top: 20rpx;
    image {
      width: 90%;
      height: 52rpx;
    }
  }
  .details_group_chat_text {
    padding-left: 10rpx;
    image {
      width: 75%;
      height: 60rpx;
    }
  }
  .details_group_chat_btn {
    position: absolute;
    right: 26rpx;
    bottom: 30rpx;
    text{
      padding: 8rpx 16rpx;
      color: #330601;
      font-size: 22rpx;
      //font-style: italic;
      background: #FFF077 ;
      border: 4rpx solid #FFFFFF;
      border-radius: 30rpx;
    }
  }
}

.nav_bar {
  height: 80rpx;
  padding: 0 20rpx;
  .nva_bar_content{
    flex: 1;text-align: left;padding-left:50rpx;
    .nav_bar_content_left {
      display: inline-block;
      padding: 4rpx 10rpx;
      margin-right: 10rpx;
      color: #FFFFFF;
      background: #FE2B3C;
      border-radius: 10rpx;
    }
    .nav_bar_title {
      display: inline-block;
      font-size: 32rpx;
      font-weight: bold;
      color: #3D3D3D;
      margin-right: 10rpx;
    }
    .nav_bar_content_right {
      display: inline-block;
      color: #FF5F15;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  image {
    width: 56rpx;
    height: 56rpx;
  }
}
//自定义导航栏css
.top_box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #FFFFFF;

}
.top_box_head{
  height: 80rpx;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  image {
    width: 56rpx;
    height: 56rpx;
  }
}

.swpier_wrap {
  position: relative;

  .swpier_box {
    position: relative;
    .indicator {
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 200rpx;
      text-align: center;
      color: #ffffff;
      position: absolute;
      right: 30rpx;
      bottom: 130rpx;
      z-index: 2;
      padding: 4rpx 14rpx;
      font-size: 28rpx;
    }

  }

  .price_box {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 16rpx 30rpx 28rpx 30rpx;
    background-color: #FF4E0D;
    border-radius: 30rpx 30rpx 0 0;
    align-items: flex-end;
    color: #ffffff;

    text:nth-child(1) {
      font-size: 26rpx;
    }

    text:nth-child(2) {
      font-size: 50rpx;
      font-weight: bold;
      margin: 0 8rpx;
      position: relative;
      top: 8rpx;
    }

    text:nth-child(3) {
      font-size: 26rpx;
    }
  }
}

.buzhou_box {
  background-color: #FFFFFF;
  padding: 16rpx 36rpx;
  align-items: center;
  justify-content: space-between;
  border-radius: 0 0 20rpx 20rpx;

  .jiantou {
    width: 22rpx;
    height: 28rpx;
  }

  .buzhou_item {
    align-items: center;
    justify-content: center;
    color: #FF4E0D;
    font-size: 22rpx;

    image {
      width: 18rpx;
      height: 36rpx;
      margin-right: 6rpx;
    }
  }
}

.navigation_wrap {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: #ffffff;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 16rpx 16rpx 16rpx;

  .left {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    height: 88rpx;

    .item {
      margin: 0 30rpx;
      text-align: center;

      image {
        width: 44rpx;
        height: 44rpx;
      }

      .btn-1 {
        text-align: center;
        color: #333333;
        position: relative;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none;
        background: transparent;
        font-size: 24rpx !important;

        image {
          width: 44rpx;
          height: 44rpx;
        }

        .btn_d66 {
          line-height: 17px;

          .text {
            font-size: 24rpx !important;
          }
        }

        /deep/ button {
          background-color: transparent !important;
          padding: 0 !important;
          margin: 0 !important;
          font-size: 28rpx !important;
          color: #333333 !important;
        }

        /deep/ button::after {
          border: none !important;
        }
      }

    }
  }

  .right_buy {
    width: 466rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fd7800;
    height: 88rpx;
    border-radius: 200rpx;
    text-align: center;

    .buy {
      .price {
        font-size: 28rpx;
        color: #ffffff;
      }

      .yuanjia {
        font-size: 20rpx;
        color: #ffffff;
      }
    }
  }
}
/* 绑定手机提示弹窗css */
.tc_wrap {
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      //width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      //width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(104deg, #F18F2C 0%, #FF7A00 100%) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}

.SubOrder_wrap {
  padding: 30rpx 30rpx 30rpx 30rpx;
  background-color: #F4F4F4;

  .popup_title {
    font-size: 36rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 30rpx;
  }

  .subBtn {
    background-color: #F97632;
    border-radius: 200rpx;
    text-align: center;
    width: 100%;
    line-height: 88rpx;
    height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
  }

  .suborder_info {
    padding: 20rpx 30rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    margin: 30rpx 0;

    .subinfo_item {
      padding: 10rpx 0;
      font-size: 28rpx;
      align-items: center;
      justify-content: space-between;

      .flje {
        margin-right: 8rpx;
      }

      .cs {
        color: #FF4E0D;
      }

      text {
        font-weight: initial !important;
      }


    }

    .huaxjia {
      margin-top: 46rpx;
      text-align: right;
      font-size: 28rpx;
      padding: 28rpx 0 20rpx 0;
      border-top: 1px dashed #D9D9D9;

    }
  }

  .goods_info {
    background-color: #ffffff;
    padding: 20rpx;
    align-items: center;
    border-radius: 28rpx;
    margin-top: 20rpx;

    .goods_img {
      width: 168rpx;
      height: 168rpx;

      image {
        width: 168rpx;
        height: 168rpx;
        border-radius: 16rpx;
      }
    }

    .goods_name {
      padding-left: 16rpx;
      flex: 1;

      .shopname {
        font-weight: bold;
        font-size: 30rpx;
        color: $zzy-text-color-333333;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .info_tags {
        margin-top: 6rpx;

      }

      .dizhizu {
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        margin-top: 10rpx;
        color: $zzy-text-color-999999;
        flex: 1;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}
//精选笔记css
.selected-notes {
  padding: 0rpx 30rpx;
  margin: 0 0 20rpx 0;
  .selected-notes-content {
    padding: 0 20rpx;
    position: relative;
    .selected-notes-bg-img {
      width: 690rpx;
      height: 748rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: -1;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .selected-notes-title {
      padding: 40rpx 20rpx 0 20rpx;
      .selected-notes-title-text {
        font-size: 48rpx;
        font-weight: bold;
        color: #881100;
        text{color: #F42906;font-size: 52rpx}
      }
      .selected-notes-subtitle {
        font-size: 28rpx;
        color: #881100;
        line-height:60rpx;
      }
    }
    .selected-notes-head{
      padding: 30rpx 18rpx;
      border-radius: 20rpx;
      background: #FFFBF6;
      .selected-notes-list {
        position: relative;
        .selected-notes-list-item {
          margin-bottom: 12rpx;
          padding-left: 30rpx;
          position: relative;
          .selected-notes-list-item-text{
            color: #3D3D3D;
            line-height: 50rpx;
            font-size: 28rpx;
          }
          .selected-notes-list-item-subtext{
            color: #888888;
            line-height: 40rpx;
            font-size: 24rpx;
          }
          .selected-notes-list-item-icon{
            width: 16rpx;
            height: 16rpx;
            position: absolute;
            top: 12rpx;
            left: 0rpx;
            border: 1px solid #F37F2C;
            border-radius: 50%;
            background: #FFFBF6;
          }
        }
      }
      .selected-notes-list::before {
        content: " ";
        position: absolute;
        left: 4px;
        top: 6px;
        bottom: 56rpx;
        width: 1px;
        border-left: 1px dashed #F37F2C;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
      }
      .selected-notes-subcont{
        padding: 18rpx;
        font-size: 24rpx;
        border-radius: 12rpx;
        background: #FFF5DF;
        .subcont-btn{
          background: linear-gradient( 270deg, #FF4014 0%, #FF6C54 100%, #FF6C54 100%);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          color: #FFFFFF;
          padding: 6rpx;
        }
      }

    }
    .selected-notes-btn {
      padding-top: 22rpx;
      position: relative;
      align-items: center;

      .selected-notes-btn-bg{
        width: 520rpx;
        height: 134rpx;
        margin: 0 auto;
        image{
          width: 520rpx;
          height: 134rpx;
        }
      }
      .selected-notes-btn-text{
        font-size: 40rpx;
        color: #FFFFFF;
        position: absolute;
        z-index: 5;
        top: calc(50% - 34rpx);
        left: calc(50% - 200rpx);
      }
    }

  }
  .select-notes-content {
    position: relative;
    .select-notes-icon {
      width: 120rpx;
      height: 120rpx;
      position: absolute;
      top: -32rpx;
      right: -28rpx;
      image {
        width: 120rpx;
        height: 120rpx;
      }
    }
    .select-notes-subhead {
      height: 72rpx;
      line-height: 72rpx;
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 40rpx;
      margin-top: -20rpx;
      .subImg{
        width: 74rpx;
        height: 56rpx;
        position: absolute;
        left: 0;
        z-index: 1;
      }
      .select-notes-subhead-content {
        width: 100%;
        background: #FFF2E8;
        border-radius: 30rpx;
        text {
          font-size: 22rpx;
          color: #881100;
        }
        .textBtn{
          padding: 10rpx 20rpx;
          margin-left: 20rpx;
          color: #FFFFFF;
          background: #FF3B01;
          border-radius: 200rpx;
        }
      }
    }
    .list_info_wrap_content{
      width: calc(100% - 260rpx);
      .list_info_wrap_content_title{
        height: 80rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #3D3D3D;
        font-weight: bold;
      }
      .list_info_wrap_content_subtitle{
        width: 100%;
        height: 240rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #3D3D3D;
      }

    }
  }
}
//精选笔记弹窗
.note_pop{
  padding: 30rpx;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .note_pop_top{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #3D3D3D;
    text-align: center;
    border-bottom: #f6f6f6 1px solid;
  }
  .note_pop_box{
    height: 0;
    color: #3D3D3D;
    flex: 1;
    .note_pop_title{
      line-height: 80rpx;
      font-size: 32rpx;
    }
    .note_pop_content{
      font-size: 26rpx;
      line-height: 40rpx;
    }
  }
}
//精选笔记添加客服弹窗
.kefu-note{
  /deep/.u-mode-center-box {
    background-color: transparent !important;
  }
  .kefu-note-box{
    height: 100%;
    overflow: hidden;
    .kefu-note-box-top{
      width: 90%;
      height: auto;
      margin: 0 auto;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .kefu-note-content{
      position: relative;
      .kefu-note-bg{
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        image{
          width: 100%;
          height: 690rpx;
        }
      }
      .kefu-note-item{
        .kefu-note-title{
          font-size: 30rpx;
          font-weight: bold;
          height: 100rpx;
          padding: 20rpx 0;
          color: #FFFFFF;
          text-align: center;
        }
        .selected-notes-head{
          padding: 10rpx 110rpx;
          border-radius: 20rpx;
          .selected-notes-list {
            position: relative;
            padding: 0 10rpx 0 10rpx;
            .selected-notes-list-item {
              margin-bottom: 12rpx;
              padding-left: 30rpx;
              position: relative;
              .selected-notes-list-item-text{
                color: #3D3D3D;
                line-height: 50rpx;
                font-size: 28rpx;
              }
              .selected-notes-list-item-subtext{
                color: #888888;
                line-height: 40rpx;
                font-size: 26rpx;
              }
              .selected-notes-list-item-icon{
                width: 16rpx;
                height: 16rpx;
                position: absolute;
                top: 12rpx;
                left: 0rpx;
                border: 1px solid #F37F2C;
                border-radius: 50%;
                background: #FFFBF6;
              }
            }
          }
          .selected-notes-list::before {
            content: " ";
            position: absolute;
            left: 9px;
            top: 6px;
            bottom: 20rpx;
            width: 1px;
            border-left: 1px dashed #F37F2C;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleX(.5);
            transform: scaleX(.5);
          }
          .selected-notes-subcont{
            padding-right: 20rpx;
            line-height: 50rpx;
            font-size: 24rpx;
            border-radius: 12rpx;
            .subcont-btn{
              background: linear-gradient( 270deg, #FF4014 0%, #FF6C54 100%, #FF6C54 100%);
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              color: #FFFFFF;
              padding: 6rpx;
            }
          }

        }
        .selected-notes-btn {
          width: 60%;
          height: 80rpx;
          line-height: 80rpx;
          margin: 80rpx auto 50rpx;
          align-items: center;
          border-radius: 50rpx;
          background: linear-gradient( 180deg, #FFF9B8 0%, #FFDA53 99%);
          .selected-notes-btn-text{
            text-align: center;
            font-size: 32rpx;
            color: #972201;
          }
        }
      }
    }
  }
}
/* 电话弹窗css */
.tel_popup{
  width: 100%;
  .tel_title{
    font-size: 32rpx;
    padding: 30rpx 20rpx;
    text-align: center;
  }
  .tel_box{
    padding: 0 30rpx;

    .tel_item{
      display: flex;
      align-items: center;
      .tel_text{
        font-size: 28rpx;
        color: #333;
        padding: 30rpx;
        text-align: center;
      }
      .tel_val{
        font-size: 28rpx;
        color: #FF7A00;
        padding: 30rpx 30rpx 30rpx 0;
        text-align: center;
      }
    }
  }
}
</style>